<template>
  <div class="container">
    <div class="hexagon-container">
      <!-- 6个正六边形面 -->
      <div class="hexagon-face face1">
        <img src="https://picx.zhimg.com/v2-99d9a79c0c6244ffbbe20d063def2b07_r.jpg?source=2c26e567" />
      </div>
      <div class="hexagon-face face2">
        <img src="https://picx.zhimg.com/v2-439897dd4a1c8e6d7a4a8b8d4df3bba5_r.jpg?source=2c26e567" />
      </div>
      <div class="hexagon-face face3">
        <img src="https://pic1.zhimg.com/v2-b8a54af0c8cd5fc51db5e2894665d40c_r.jpg?source=1940ef5c" />
      </div>
      <div class="hexagon-face face4">
        <img src="https://pic1.zhimg.com/v2-5e7f2575d4c7206a9c160a1ef155aff1_r.jpg?source=1940ef5c" />
      </div>
      <div class="hexagon-face face5">
        <img
          src="https://pic2.zhimg.com/v2-a553896f5e13931087a18a76a5f0374e_r.jpg?source=1940ef5c?imageView2/2/w/640/q/85" />
      </div>
      <div class="hexagon-face face6">
        <img
          src="https://pic2.zhimg.com/v2-a48b322f91756a96c91294b2caa02916_r.jpg?source=1940ef5c?imageView2/2/w/640/q/85" />
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.container {
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2000px;
  /* 父容器提供透视效果 */
}

.hexagon-container {
  position: relative;
  width: 250px;
  /* 每个面的宽度（正六边形边长） */
  height: 400px;
  /* 每个面的高度（可自定义） */
  transform-style: preserve-3d;
  /* 保持3D空间 */
  animation: rotate 25s linear infinite;
  /* 可调整X轴旋转角度观察3D效果 */
}

.hexagon-face {
  position: absolute;
  width: 100%;
  /* 继承父容器宽度 250px */
  height: 100%;
  /* 继承父容器高度 400px */
  opacity: 0.8;
  /* 半透明方便观察重叠 */
  border: 1px solid #fff;
  /* 白色边框区分面 */
  transform-origin: center center;

  /* 变换原点为中心 */
  >img {
    max-width: 100%;
    overflow: hidden;
  }
}

/* 正六边形半径 radius=250px，每个面间隔60°，通过三角函数计算偏移 */
.face1 {
  background: #666;
  transform: rotateY(0deg) translateZ(250px);
  /* 正面（Z轴向前） */
}

.face2 {
  background: pink;
  transform: rotateY(60deg) translateZ(250px);
  /* 右侧60° */
}

.face3 {
  background: #666;
  transform: rotateY(120deg) translateZ(250px);
  /* 右侧120° */
}

.face4 {
  background: pink;
  transform: rotateY(180deg) translateZ(250px);
  /* 背面 */
}

.face5 {
  background: #666;
  transform: rotateY(240deg) translateZ(250px);
  /* 左侧120° */
}

.face6 {
  background: pink;
  transform: rotateY(300deg) translateZ(250px);
  /* 左侧60° */
}
</style>